<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p {
            width: 100%;
            height: 50px;
            background-color: pink;
        }

        .active {
            margin: 50px;
        }

        .box {
            position: fixed;
            bottom: 0;
        }
        .max{
            box-shadow: 10px 10px 10px rgba(0,0,0,.5);
        }
    </style>
</head>
<body>
<div>我是div元素</div>
<p>我是p元素</p>
<header>我是header元素</header>
<script>
    /*
    ### 样式属性： 可以通过JavaScript设置或者修改标签元素的样式属性
      style属性操作css
            语法：DOM对象.style.样式属性=值

      className操作css
            如果修改的样式比较多，直接通过style属性修改比较麻烦，可以借助css类名的形式
            由于class是关键字所以使用className代替，className是使用新值换旧值，如果需要添加一个类需要保留之前的类名
            语法：DOM对象.className=值

      classList操作css
            Element.classList 是一个只读属性，返回一个元素 class 属性的动态 DOMTokenList 集合。这可以用于操作 class 集合。
            相比将 element.className 作为以空格分隔的字符串来使用，classList 是一种更方便的访问元素的类列表的方法。
            值:
                一个 DOMTokenList，表示元素的 class 属性的集合。如果 class 属性没有设置或者为空，它将返回一个空的 DOMTokenList，即 length 属性等于 0 的 DOMTokenList。
                尽管 classList 属性自身是只读的，但是你可以使用 add()、remove()、replace() 和 toggle() 方法修改其关联的 DOMTokenList。
    */

    // style属性操作css
    const div = document.querySelector("div")
    div.style.width = "100%"
    div.style.height = "100px"
    div.style.backgroundColor = "red"

    //className操作css
    const p = document.querySelector("p")
    p.className = "p active" //添加class
    p.className = "" //移除class

    //classList操作css
    const header = document.querySelector("header")
    //添加类名
    header.classList.add("p")
    header.classList.add("active")
    header.classList.add("header")
    //判断有没有此类名
    console.log(header.classList.contains("active"))
    //移除类名
    header.classList.remove("header")
    //遍历类名
    header.classList.forEach((item) => {
        console.log(item)
    })

    //切换类名
    header.classList.toggle("max")

    //替换类名
    header.classList.replace("active", "box")

</script>
</body>
</html>